<!DOCTYPE HTML>
<html th:with="title='编辑设备',module='/js/app/common/uploadvideo.js'">
<head th:include="fragments/UEheader :: header">
<meta charset="utf-8" />
<style type="text/css">
#insertSpe {
	margin-left: 12%;
}
</style>
</head>
<body id="app">
	<div class="page-container">
		<input type="hidden" id="backgroundImg" name="backgroundImg">
		<form action="/manager/product/update" method="post" class="form form-horizontal" id="device-form">
			<input type="hidden" name="id" v-model="id" />
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品名称：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="name" id="name" name="name">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品价格：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="price" id="price" name="price">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品积分：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="rewardPoint" id="rewardPoint" name="rewardPoint">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">选择类别：</label>
				<input type="hidden" class="input-text radius size-L" v-model="adsClassify.id" id="adsClassifyId" >
				<div class="formControls col-xs-2 col-sm-2">
					<select class="input-text size-L" id="adsClassify" name="adsClassify" >
						<option></option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">是否热卖：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<select class="input-text size-L" id="ishot" name="ishot" v-model="ishot">
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					购买链接：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="pathUrl" id="pathUrl" name="pathUrl">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品规格：</label>
				<div class="formControls col-xs-8 col-sm-8">
					<input type="button" value="添加" class="btn btn-primary size-L radius input-text size-M" style="margin-bottom: 10px;" onclick="addspe()">
					<div id="insertSpe"></div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">轮播图：</label>
				<input type="hidden" id="slideImage" name="slideImage">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!-- 					<div id="slideImageList">
					</div> -->
						<!--用来存放item-->
						<div id="fileLists" class="uploader-list"></div>
						<div id="filePickerList" class="btn btn-primary size-L radius">选择文件</div>
						<input type="button" class="btn btn-primary size-L radius" id="btn" value="开始上传">
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					缩略图：
				</label>
				<input type="hidden" id="image" name="image">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker" class="btn btn-primary size-L radius ">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">轮播视频：</label>
				<input type="hidden" id="video" name="video">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!-- 					<div id="videos">
					</div> -->
						<!--用来存放item-->
						<div id="videoList" class="uploader-list"></div>
						<div id="videoPicker" class="btn btn-primary size-L radius">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品描述：</label>
				<div class="formControls col-xs-8 col-sm-8">
					<script id='container' name='introduction' style='width: 1100px; height: 350px' type='text/plain'>
			</script>
				</div>
			</div>

			<!-- 	<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">关联用户：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<span class="select-box">
					<select class="select size-S" id="multuserNames" name="multuserNames" size="8">						
					</select>
				</span>				
				<input type="hidden" name="multuserIds" id="multuserIds" v-model="userIds" />
			</div>
			<div class="formControls col-xs-1 col-sm-1">
				<input class="btn btn-link" type="button"  onclick="showMenu();" value="选择">
			</div>
		</div>	 -->
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary size-L radius" type="submit" value="提交">
					<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<div th:include="fragments/widget :: multuserTreePanel"></div>
	<script th:include="fragments/widget :: multuserTreeJs" type="text/javascript">
		
	</script>
	<script type="text/javascript">
		function delImg(num) {
			$('#' + num).remove();
		}
		var ue = UE.getEditor('container');
		var a = 0;
		var b = '"';
		//添加规格按钮事件
		function addspe() {
			var insertText = "<div style='height:30px; margin-bottom: 10px;'><div class='formControls col-xs-1 col-sm-1'><input type='text'  placeholder='规格名：' class='input-text size-M' id='speName"+a+"' name='speName' v-model='speName"+a+"'></div><div class='formControls col-xs-2 col-sm-2'><input type='text'  placeholder='规格值：' class='input-text size-M' id='speVal"+a+"' name='speVal' v-model='speVal"+a+"'></div></div>";
			$("#insertSpe").append(insertText);
			a += 1;
		}
		function get() {
			var id = getIdFromUrl();
			$.ajax({
						type : "GET",
						url : '/manager/product/get/' + id,
						beforeSend : function() {
						},
						complete : function() {
						},
						error : function(request) {
							alert("Connection error");
						},
						success : function(result) {
							if (result.status == 0) {
								var data = result.data;
								new Vue({
									el : '#device-form',
									data : data
								});

								//轮播图处理
								if (data.slideImage != "") {
									var imageList = data.slideImage.split(",");
									for (var i = 0; i < imageList.length; i++) {
										$("#fileLists").append("<img id='" + i + "' src='" + imageList[i] + "' width='100' onclick='delImg(" + i + ")' height='100'>");

									}
								}
								//视频处理
								if (data.video != null) {
									$("#videoList").append("<a href='"+data.video+"' width='100' height='100'>" + data.video + "</a>");
									$("#video").val(data.video);
								}
								//缩略图处理
								if (data.image != "") {
									$("#fileList").append("<img src='"+data.image+"'  width='100' height='100'>");
									$("#backgroundImg").val(data.image);
								}
								//商品描述
								if (data.introduction != null) {
									ue.ready(function() {
										ue.setContent(data.introduction);
									});
								}
								//规格处理
								if (data.specificationList.length != 0) {
									for (var i = 0; i < data.specificationList.length; i++) {
										var insertText = "<div style='height:30px; margin-bottom: 10px;'><div class='formControls col-xs-1 col-sm-1'><input type='text'  placeholder='规格名：' class='input-text size-M' id='speName"+a+"' name='speName' v-model='speName"+a+"'></div><div class='formControls col-xs-2 col-sm-2'><input type='text'  placeholder='规格值：' class='input-text size-M' id='speVal"+a+"' name='speVal' v-model='speVal"+a+"'></div></div>";
										$("#insertSpe").append(insertText);
										$("#speName" + i).val(data.specificationList[i].specification_name.toString());
										$("#speVal" + i).val(data.specificationList[i].specification.toString());
										a += 1;
									}

								}
								showAdsClassify();
								/* if(data.userNames != "") {
									var userNames = data.userNames.split(",");
									var optHtml = "";
									for(var i = 0; i < userNames.length; i++) {
										optHtml += "<option>"+userNames[i]+"</option>";
									}
									$("#multuserNames").html(optHtml);
								} */

							}
						}
					});
		}

		$(function() {
			/* $('#multuserIds').multiselect({submitAllLeft: false, submitAllRight: false}); */
			get();
			$("#device-form").validate({
				rules : {
					name : {
						required : true
					},
					price : {
						required : true
					},
					pathUrl : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var imglist = "";
					$.each($("#fileLists img"), function() {
						//当图片上传成功时才进行拼接
						if ($(this).attr('src').indexOf("http") == 0) {
							imglist += $(this).attr('src') + ",";
						}
					});
					//填充叠加后轮播图url至隐藏域并去除结尾多余的逗号
					$("#slideImage").val(imglist.substring(0, imglist.length - 1));

					//缩略图地址赋值给image隐藏域
					$("#image").val($("#backgroundImg").val());

					//拼接规格格式
					for (var i = 0; i < a; i++) {
						$("#speVal" + i).val($("#speVal" + i).val() + ",-");
					}
					if ($("#image").val() == "") {
						layer.alert("请上传缩略图！");
						return;
					}
					var data = $('#device-form').serialize();
					$.ajax({
						type : "POST",
						url : '/manager/product/update',
						data : data,
						beforeSend : function() {

						},
						complete : function() {

						},
						error : function(request) {
							layer.alert("系统出错");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});

		var showAdsClassify = function(){
			var adsClassifyId = $("#adsClassifyId").val();
			$.ajax({
				type : "GET",
				url : '/manager/adsclassify/queryPage',
				data : {
					pageNo : 1,
					pageSize : 500
				},
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					var data = result.data;
					var obj = document.getElementById("adsClassify");
					obj.options.length = 0;
					var bb = $(document).find("#adsClassify");
					for ( var i = 0; i < data.length; i++) {
						if(adsClassifyId === data[i].id ){
							bb.append("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>");
						}else{
							bb.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
						}
					}
				}
			});
		}
	</script>
</body>
</html>